<template>
    <div>
        <div class="bg-gray-500">
            <!-- <h1 class="text-center text-lg">一些小的Demos</h1> -->
            <!-- {{ $route.name }} -->
            <div
                class="my-0.5 text-sm text-center py-1 text-gray-100 flex flex-row flex-wrap gap-2 justify-center"
            >
                <router-link :to="{ name: 'layout' }" class="lzh-nav-link">
                    Layout
                </router-link>
                <span class="px-2">|</span>
                <router-link :to="{ name: 'controls' }" class="lzh-nav-link">
                    Controls
                </router-link>
                <span class="px-2">|</span>
                <router-link :to="{ name: 'form1' }" class="lzh-nav-link">
                    Form1
                </router-link>
                <span class="px-2">|</span>
                <router-link :to="{ name: 'form2' }" class="lzh-nav-link">
                    Form2
                </router-link>
                <span class="px-2">|</span>
                <router-link :to="{ name: 'form3' }" class="lzh-nav-link">
                    Form3
                </router-link>
                <span class="px-2">|</span>
                <router-link :to="{ name: 'carousel' }" class="lzh-nav-link">
                    Carousel
                </router-link>
                <span class="px-2">|</span>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "ElementPlusIndexComp",
    setup() {
        return {};
    },
});
</script>

<style scoped></style>
